<template>
  <div class="bj" v-waterMarker="'订单管理'">
    <el-table
      v-copy
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      stripe
      :default-expand-all="false"
    >
      <el-table-column prop="orderInfo" label="订单信息" align="center">
        <template #default="scope">
          <div class="infoBOx">
            <div style="color: #3eb5c4">
              {{ scope.row.orderInfo && scope.row.orderInfo.orderNumber }}
            </div>
            <div>
              {{ scope.row.orderInfo && scope.row.orderInfo.customerName }}
              {{ scope.row.orderInfo && scope.row.orderInfo.phoneNumber }}
            </div>
            <div>
              {{
                scope.row.orderInfo &&
                dayjs(scope.row.orderInfo.orderTime).format(
                  "YYYY-MM-DD HH:mm:ss"
                )
              }}
            </div>
            <!-- {{ console.log(scope.row.orderInfo.orderNumber) }} -->
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="train_type" label="车次/类型" align="center">
        <template #default="scope">
          <div class="train_type">
            <div>{{ scope.row.trainNumber }}</div>
            <div>{{ scope.row.trainType }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="goInfo" label="出发到达站" align="center">
        <template #default="scope">
          <div class="lineBox">
            <div>
              <span :class="'start'">始</span>
              {{ scope.row.departureStation }}
            </div>
            <div>
              <span :class="'end'">过</span>
              {{ scope.row.arrivalStation }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="timeObj" label="出发到达时间" align="center">
        <template #default="{ row }">
          <div style="font-weight: bold">
            {{
              row.departureTime
                ? dayjs(row.departureTime).format("HH:mm")
                : "--"
            }}
          </div>
          <div>
            {{
              row.departureTime ? dayjs(row.arrivalTime).format("HH:mm") : "--"
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="rider" label="乘车人/出发日期" align="left">
        <template #default="{ row }">
          <div>
            {{ row.passengers }}
          </div>
          <div>
            {{ dayjs(row.departureTime).format("YYYY-MM-DD") }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        width="180px"
        prop="name"
        label="票价/车厢座号/坐席类型"
        align="center"
      >
        <template #default="{ row }">
          <div class="typeS">
            <div>
              {{ comPrice(row.ticketPrice) }}
            </div>
            <div>{{ row.carriageNumber }}车{{ row.seatNumber }}</div>
            <div>{{ row.seatType }}</div>
          </div>
        </template></el-table-column
      >
      <el-table-column prop="address" label="状态" align="center">
        <template #default="{ row }">
          <div
            v-show="row.children && row.children.length"
            style="color: #5bd7af; font-weight: bold"
          >
            {{ row.status }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="address" label="操作" align="center">
        <template #default="{ row }">
          <div class="actions" v-show="row.children && row.children.length">
            <img :src="openIcon" alt="" />
            <img :src="delIcon" alt="" />
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import openIcon from "../../img/查看.png";
import delIcon from "../../img/删除订单.png";
import dayjs from "dayjs";
import { computed } from "vue";
const tableData = [
  {
    id: "1",
    orderInfo: {
      orderNumber: "E123456",
      customerName: "张三",
      phoneNumber: "1881234600",
      orderTime: 1681714500000,
    },
    trainNumber: "G71",
    trainType: "高铁",
    departureStation: "北京西",
    arrivalStation: "武汉",
    departureTime: 1681714500000,
    arrivalTime: 1681735500000,
    passengers: "杨小明",
    departureDate: "2023-06-01",
    ticketPrice: "250",
    carriageNumber: "12",
    seatNumber: "01A",
    seatType: "二等座",
    status: "已付款",
    children: [
      {
        id: "12",

        trainNumber: "G123",
        trainType: "高铁",
        departureStation: "北京",
        arrivalStation: "上海",
        departureTime: 1681714500000,
        arrivalTime: 1681735500000,
        passengers: "王五",
        departureDate: "2023-06-01",
        ticketPrice: "250",
        carriageNumber: "12",
        seatNumber: "01B",
        seatType: "二等座",
        status: "已支付",
      },
      {
        id: "13",
        trainNumber: "G123",
        trainType: "高铁",
        departureStation: "北京",
        arrivalStation: "上海",
        departureTime: 1681714500000,
        arrivalTime: 1681735500000,
        passengers: "赵六",
        departureDate: "2023-06-01",
        ticketPrice: "250",
        carriageNumber: "11",
        seatNumber: "01C",
        seatType: "二等座",
        status: "已付款",
      },
      {
        id: "14",
        trainNumber: "G123",
        trainType: "高铁",
        departureStation: "北京",
        arrivalStation: "上海",
        departureTime: 1681714500000,
        arrivalTime: 1681735500000,
        passengers: "赵六",
        departureDate: "2023-06-01",
        ticketPrice: "250",
        carriageNumber: "11",
        seatNumber: "01A",
        seatType: "二等座",
        status: "已付款",
      },
      {
        id: "15",
        trainNumber: "G123",
        trainType: "高铁",
        departureStation: "北京",
        arrivalStation: "上海",
        departureTime: 1681714500000,
        arrivalTime: 1681735500000,
        passengers: "赵六",
        departureDate: "2023-06-01",
        ticketPrice: "250",
        carriageNumber: "11",
        seatNumber: "01B",
        seatType: "二等座",
        status: "已付款",
      },
    ],
  },
  {
    id: "2",
    orderInfo: {
      orderNumber: "E13554",
      customerName: "李四",
      phoneNumber: "1234567890",
      orderTime: 1681714500000,
    },
    trainNumber: "G123",
    trainType: "高铁",
    departureStation: "北京",
    arrivalStation: "上海",
    departureTime: 1681714500000,
    arrivalTime: 1681735500000,
    passengers: "李爸爸",
    departureDate: "2023-06-01",
    ticketPrice: "250",
    carriageNumber: "05",
    seatNumber: "01A",
    seatType: "二等座",
    status: "已付款",
    children: [
      {
        id: "22",

        trainNumber: "G123",
        trainType: "高铁",
        departureStation: "北京",
        arrivalStation: "上海",
        departureTime: 1681714500000,
        arrivalTime: 1681735500000,
        passengers: "李妈妈",
        departureDate: "2023-06-01",
        ticketPrice: "250",
        carriageNumber: "05",
        seatNumber: "01B",
        seatType: "二等座",
        status: "已付款",
      },
      {
        id: "23",
        trainNumber: "G123",
        trainType: "高铁",
        departureStation: "北京",
        arrivalStation: "上海",
        departureTime: 1681714500000,
        arrivalTime: 1681735500000,
        passengers: "赵六",
        departureDate: "2023-06-01",
        ticketPrice: "250",
        carriageNumber: "05",
        seatNumber: "01C",
        seatType: "二等座",
        status: "已付款",
      },
    ],
  },
];
const comPrice = computed(() => (val) => {
  return "￥" + val + ".0";
});
</script>
<style lang="scss" scoped>
.orderBox {
  width: 100%;
  height: 100%;
  thead {
    th {
      background-color: #d8dae2 !important;
      color: #000;
    }
  }
  .cell {
    position: relative;
    .el-table__expand-icon {
      position: absolute;
      right: 0px;
      top: 25%;
    }
  }
  .infoBOx {
    // display: flex;
    text-align: left;
  }
  .actions {
    img {
      width: 30px;
      margin: 0 5px;
    }
  }
  .lineBox {
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 20px;
      margin: 8px 0;
      font-weight: bold;
      font-size: 15px;
      .start {
        background-color: #94b1e1;
      }
      .end {
        margin-left: -15px;
        background-color: #ff8d41;
      }
    }
    span {
      width: 20px;
      height: 20px;
      // background-color: #a1a5b3;
      font-size: 12px;
      text-align: center;
      border-radius: 5px;
      line-height: 20px;
      margin-right: 10px;
      font-weight: bold;
      color: #fff;
    }
  }
  .train_type {
    :nth-child(1) {
      color: #2baebe;
      font-weight: bold;
      font-size: 18px;
    }
  }
  .typeS {
    :nth-child(1) {
      font-size: 14px;
      color: #ff8d41;
    }
    :nth-child(2) {
      font-size: 18px;
      color: #000;
    }
    :nth-child(3) {
      font-size: 14px;
      color: #000;
    }
  }
}
</style>
